function readJSON() {
    // Check if the hikes object exists in local storage
    let hikes = localStorage.getItem('hikes');
    if (!hikes) {
        document.getElementById('hikeCards').innerHTML = '<p>No hikes found.</p>';
    } else {
        hikes = JSON.parse(hikes);
        // Iterate over the hikes and create Bootstrap cards dynamically
        hikes.hikes.forEach(hike => {
            // Create card elements
            const card = document.createElement('div');
            card.classList.add('card', 'col-md-4');
            const cardBody = document.createElement('div');
            cardBody.classList.add('card-body');
            const title = document.createElement('h5');
            title.classList.add('card-title');
            title.textContent = hike.name;

            const distance = document.createElement('p');
            distance.classList.add('card-text');
            distance.textContent = 'Distance: ' + hike.distance;

            const location = document.createElement('p');
            location.classList.add('card-text');
            location.textContent = 'Location: ' + hike.location;

            const difficulty = document.createElement('p');
            difficulty.classList.add('card-text');
            difficulty.textContent = 'difficulty: ' + hike.difficulty;
            // Append elements to the card
            cardBody.appendChild(title);
            cardBody.appendChild(distance);
            cardBody.appendChild(location);
            cardBody.appendChild(difficulty);

            card.appendChild(cardBody);
            // Append card to the container
            document.getElementById('hikeCards').appendChild(card);
        });
    }
}
readJSON();